﻿
@{
    ViewBag.Title = "返工清单";
    Layout = "~/Views/Shared/_LayoutPage.cshtml";
}

@section Contents{
    <style>
        .layui-input-inline {
            padding: 6px 0 !important;
        }

        .reworkItem {
            padding: 5px 10px;
            border: 1px solid #ff6a00;
            margin: 0 10px 10px 0;
            float: left;
        }

        .reworkItem {
            float: left;
            background-color: #FAFAFA;
            border: 1px solid #F6F6F6;
            padding: 5px 10px;
            margin: 0 10px 10px 0;
        }

            .reworkItem .layui-icon-delete {
                color: red;
                margin-left: 5px;
            }
    </style>
}

<div id="page"></div>

<script type="text/template" id="tplPage">
    <div style="padding: 20px; background-color: #F2F2F2;">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="layui-row">
                    <div class="layui-col-xs3 layui-inline">
                        <label class="layui-form-label">返工单号：</label>
                        <div class="layui-input-inline">
                            {{model.ReworkNo}}
                        </div>
                    </div>
                    <div class="layui-col-xs3 layui-inline">
                        <label class="layui-form-label">返工类型：</label>
                        <div class="layui-input-inline">
                            {{model.CNReworkType}}
                        </div>
                    </div>
                    <div class="layui-col-xs3 layui-inline">
                        <label class="layui-form-label">返工车间：</label>
                        <div class="layui-input-inline">
                            {{model.WorkshopName}}
                        </div>
                    </div>
                    <div class="layui-col-xs3 layui-inline">
                        <label class="layui-form-label">返工工序：</label>
                        <div class="layui-input-inline">
                            <span v-for="site in model.Sites" style="padding:5px;background-color:#ff6a00;color:#FFF;margin:1px;">{{site.SiteName}}</span>
                        </div>
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-xs3 layui-inline">
                        <label class="layui-form-label">订单号：</label>
                        <div class="layui-input-inline">
                            {{model.OrderNo}}
                        </div>
                    </div>
                    <div class="layui-col-xs3 layui-inline">
                        <label class="layui-form-label">客户代码：</label>
                        <div class="layui-input-inline">
                            {{model.CustomerCode}}
                        </div>
                    </div>
                    <div class="layui-col-xs3 layui-inline">
                        <label class="layui-form-label">客户名称：</label>
                        <div class="layui-input-inline">
                            {{model.CustomerName}}
                        </div>
                    </div>
                    <div class="layui-col-xs3 layui-inline">
                        <label class="layui-form-label">创建时间：</label>
                        <div class="layui-input-inline">
                            {{model.CreateTimeStr}}
                        </div>
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-xs3 layui-inline">
                        <label class="layui-form-label">审核状态：</label>
                        <div class="layui-input-inline">
                            {{model.OrderNo}}
                        </div>
                    </div>
                    <div class="layui-col-xs3 layui-inline">
                        <label class="layui-form-label">审核人：</label>
                        <div class="layui-input-inline">
                            {{model.CNReviewBy}}
                        </div>
                    </div>
                    <div class="layui-col-xs3 layui-inline">
                        <label class="layui-form-label">审核时间：</label>
                        <div class="layui-input-inline">
                            {{model.ReviewTimeStr}}
                        </div>
                    </div>
                    <div class="layui-col-xs3 layui-inline">
                        <label class="layui-form-label">审核说明：</label>
                        <div class="layui-input-inline">
                            {{model.ReviewDesc}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-card">
            <div class="layui-card-header">
                返工清单（{{model.CNReworkType}}）
            </div>
            <div class="layui-card-body" style="display: flow-root;">
                <div class="reworkItem" v-for="item in model.Items">{{item.ReworkItemNo}}<i class="layui-icon layui-icon-delete" @@click="removeItem(item)"></i></div>
                <div v-if="model.Items.length<=0" style="padding:20px; text-align:center;">暂无返工清单</div>
            </div>
        </div>
        <div class="layui-card" v-if="model.ReviewStatus==0||model.ReviewStatus==3">
            <div class="layui-card-header">
                新增返工
            </div>
            <div class="layui-card-body layui-form ">
                <textarea id="txtNewItems" name="newItems" class="layui-textarea"></textarea>
                <div style="text-align:right; padding: 10px 0;">
                    <button type="button" class="layui-btn" @@click="addItems">新增</button>
                </div>
            </div>
        </div>
    </div>
</script>

@section Scripts{
    <script>
        var vm = new Vue({
            el: "#page",
            template: "#tplPage",
            data: {
                lang: JSON.parse(lang).package,
                reworkNo: "@ViewBag.ReworkNo",
                model: {}
            }
        });

        setTimeout(function () {
            initLayui();
        }, 50);
        function initLayui() {
            layui.use(['form', 'layer', 'index', 'laydate'], function () {
                var layer = layui.layer,
                    form = layui.form;

                queryReworkItems();
            });
        }

        function addItems() {
            var newItems = $("#txtNewItems").val().trim().split('\n');
            console.log(newItems);
            if (newItems.length <= 0) {
                return;
            }
            var loadId = layer.load();
            $.ajax({
                url: "/Quality/AddReworkItems",
                data: {
                    reworkNo: vm.$data.reworkNo,
                    itemNos: newItems
                },
                complete: function () {
                    layer.close(loadId);
                },
                success: function (res) {
                    if (res.ErrCode != 200) {
                        layer.msg(res.ErrMsg, { icon: 5 });
                        return;
                    }
                    queryReworkItems();
                    $("#txtNewItems").val("");
                }
            });
        }

        function removeItem(item) {
            var loadId = layer.load();
            $.ajax({
                url: "/Quality/RemoveReworkItem",
                data: {
                    reworkNo: vm.$data.reworkNo,
                    itemNo: item.ReworkItemNo
                },
                complete: function () {
                    layer.close(loadId);
                },
                success: function (res) {
                    if (res.ErrCode != 200) {
                        layer.msg(res.ErrMsg, { icon: 5 });
                        return;
                    }

                    for (var i = 0; i < vm.$data.model.Items.length; i++) {
                        if (vm.$data.model.Items[i].ReworkItemNo.toUpperCase() == item.ReworkItemNo.toUpperCase()) {
                            vm.$data.model.Items.splice(i, 1);
                            break;
                        }
                    }
                }
            });
        }

        function queryReworkItems() {
            var loadId = layer.load();
            $.ajax({
                url: "/Quality/GetRework",
                data: {
                    reworkNo: vm.$data.reworkNo
                },
                complete: function () {
                    layer.close(loadId);
                },
                success: function (res) {
                    if (res.ErrCode != 200) {
                        layer.msg(res.ErrMsg, { icon: 5 });
                        return;
                    }
                    vm.$data.model = res.Data;
                }
            });
        }
    </script>
}
